<template>
	<form class="search-area" @submit.prevent="handleSearch">
		<!-- submit.prevent是阻止submit的默认操作，并执行自定义的函数handleSearch -->
		<input type="text" :placeholder="placeholder" v-model="searchValue"/>
		<!-- 将searchValue双向绑定到input中，input输入框中的值改变时会影响searchValue传到父组件的值 -->
		<div class="icon" @click="handleSearch">
			<!-- div绑定了一个点击事件handleSearch -->
			<Icon type="search"></Icon>
		</div>
	</form>
</template>

<script>
	import Icon from './icon.vue';  //导入写好的组件
	export default{
		components:{  //在这里将导入的组件注册好名称
			Icon,
		},
		props:{
			placeholder:{
				type:String,
				default:"输入内容进行搜索"
			}
		},
		data(){
			return{
				searchValue:""  //返回一个搜索的值
			}
		},
		methods:{
			handleSearch(){
				if(this.searchValue){  //该处进行了一个判断，如果输入的值为空，则不会进行任何操作，否则将执行搜索步骤
					// 将search函数传给父元素进行处理，search是函数名
					this.$emit("search",this.searchValue)
				}
				// alert("请输入内容后重试！")
			}
		}
	}
</script>

<style scoped>
	.search-area{
		width: 100%;
		height: 100%;
		padding-left: 10px;
		padding-right: 40px;
		box-sizing: border-box;
		border: 1px solid #e7e7e7;
		border-radius: 4px;
		position: relative;
		/* 子元素绝对定位，则父元素要相对定位 */
	}
	.search-area input{
		/* input的边框设置为none，也就是取消边框 */
		border: none; 
		/* 将input的outline也就是轮廓取消 */
		outline: none;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		/* 使元素的padding和边框之和占比100%，这样不会出现设置宽高100%以后有超出范围的情况 */
	}
	.search-area input::placeholder{
		color: #999999;
	}
	.icon{
		position: absolute;
		/* 子元素绝对定位，则父元素要相对定位 */
		width: 40px;
		height: 100%;
		right: 0;
		top: 0;
		/* 弹性盒子 */
		display: flex;
		align-items: center;
		/* 水平居中 */
		justify-content: center;
		/* 垂直居中 */
		color: #c0c0c0;
		cursor: pointer;
		/* 鼠标移动到元素上的时候，鼠标变成小手的形状 */
	}
</style>
